{% extends './layout/base.njk' %}
{% block stylesheet %}
  <link rel="stylesheet/less" href="public/style/login.less"/>
{% endblock stylesheet %}
{% block header %}
  {% include './components/Header.njk' %}
{% endblock header %}
{% block main %}
  <form
    class="row needs-validation zy-col-100 zy-login__form"
    id="form"
    novalidate
    accept-charset="UTF-8"
    method="post"
    action="/api/v1/login?_csrf={{ ctx.csrf | safe }}">
    <div class="col-6 zy-login__form--box text-center">
      <h2 class="zy-login--title">登录</h2>
      <div class="zy-login__input--wrapper">
        <div class="input-group has-validation">
          <label for="validationServerUsername" class="input-group-text">
            <i class="fas fa-user"></i>
          </label>
          <input
            type="text"
            class="form-control"
            id="validationServerUsername"
            name="username"
            placeholder="请输入用户名"
            aria-describedby="validationServerUsernameFeedback"
            required="required"/>
          <div id="validationServerUsernameFeedback" class="invalid-feedback">
            用户名不能为空
          </div>
        </div>
      </div>
      <div class="zy-login__input--wrapper">
        <div class="input-group has-validation">
          <label for="validationPassword" class="input-group-text">
            <i class="fas fa-lock"></i>
          </label>
          <input
            type="password"
            class="form-control"
            id="validationPassword"
            name="password"
            required="required"
            aria-describedby="validationServerPasswordFeedback"
            placeholder="请输入密码"/>
          <div id="validationServerPasswordFeedback" class="invalid-feedback">
            密码不能为空!
          </div>
        </div>
      </div>
      <div class="zy-login__input--wrapper">
        <button class="col-12 btn btn-primary" type="submit">登录</button>
      </div>
    </div>
  </form>
{% endblock main %}
{% block script %}
  <script src='/public/js/login.js'></script>
{% endblock script %}